<template>
	<view class="content">
		<view class="logo">
			<image src="../../static/images/logo.png" mode="widthFix"></image>
		</view>
		<view class="loginfo">
			<view class="account">
				<text>手机号</text>
				<input v-model="phone" class="text" type="text" value="" placeholder="请输入手机号" />
			</view>
			<view class="account">
				<text>验证码</text>
				<input v-model="code" class="register" type="text" value="" placeholder="请输入验证码" />
				<text :class="disabled ? 'verifys':'verify'" @tap='verify' :disabled='disabled'>{{verifys}}</text>
			</view>
			<view class="account">
				<text>密码</text>
				<input v-model="password" class="password" type="password" value="" placeholder="请输入密码" />
			</view>
			<view class="" style="margin-left: -35%;">
				<image src="../../static/images/s33.png" mode="widthFix" v-if="flag" @tap="flag = !flag"></image>
				<image src="../../static/images/s31.png" mode="widthFix" v-else @tap="flag = !flag"></image>
				<text class="protocol">点击注册，即同意隐私协议</text>
			</view>
			<!-- <view class="account">
				<text>验证码：</text>
				<input v-model="code" class="register" type="text" value="" placeholder="请输入验证码" />
				<text :class="disabled ? 'verifys':'verify'" @tap='verify' :disabled='disabled'>{{verifys}}</text>
				
			</view> -->
		</view>
		<view class="login">
			<image src="../../static/images/s32.png" mode="widthFix" @tap="registers"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: false,
				phone: '',
				password: '',
				code: '22',
				disabled: false,
				verifys: '获取验证码'
			}
		},
		methods: {
			verify() {
				if (this.disabled) return
				this.verifyDate()
			},
			registers() {
				if (this.password == '') {
					this.$sToast('密码不能为空');
					return;
				}
				if (this.phone == '') {
					this.$sToast('手机号不能为空');
					return;
				}
				if (!/^1[23456789]\d{9}$/.test(this.phone)) {
					this.$sToast('手机号格式错误');
					return false;
				}
				if (!this.flag) {
					this.$sToast('请勾选协议')
					return false;
				}
				this.$ajax(
					this.apiList.register, {
						mobile: this.phone,
						password: this.password,
						code: this.code
					},
					'POST'
				).then(res => {
					this.$sToast(res.msg)
					if (this.flag) {
						this.$open('../login/login', 2, 1500)
					}
				});
			},
			verifyDate() {
				this.disabled = true
				var count = 60
				var timer = setInterval(() => {
					count--;
					this.verifys = `剩余${count}秒`
					if (count === 0) {
						count = 60;
						this.verifys = `发送验证码`
						clearInterval(timer)
					}
				}, 1000)

			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.logo {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			margin-top: 80upx;

			image {
				width: 365upx;
			}
		}

		.loginfo {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;

			.account {
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 400;
				margin-bottom: 30upx;
				position: relative;
				width: 80%;
				height: 88rpx;
				
				display: flex;
				align-items: center;
				border-bottom: 1px solid #DCDBDB;
			}

			text {
				width: 25%;
				margin-top: -20rpx;
				background: rgba(255, 255, 255, 1);
				// border: 1upx solid rgba(112, 112, 112, 1);
				border-radius: 10upx;
				// background: url(../../static/images/s27.png) no-repeat;
				background-size: 6%;
				background-position: 3%;
			}

			input {
				margin-top: -20upx;
				width: 60%;
				// height: 77upx;
				background: rgba(255, 255, 255, 1);
				// border: 1upx solid rgba(112, 112, 112, 1);
				border-radius: 10upx;
				// background: url(../../static/images/s28.png) no-repeat;
				background-size: 6%;
				background-position: 3%;
				padding-left: 60upx;
			}
			.register {
				margin-top: -0rpx;
				margin-bottom: 10upx;
				width: 60%;
				background: rgba(255, 255, 255, 1);
				background-size: 6%;
				background-position: 3%;
				padding-left: 60upx;
			}

			.verify {
				font-size: 20upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #fff;
				position: absolute;
				right: 0%;
				top: 30rpx;
				display: inline-block;
				padding: 5upx;
				background: #13CA62;
				text-align: center;
				padding: 10rpx 20rpx;
			}

			.verifys {
				font-size: 20upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ccc;
				position: absolute;
				top: 45%;
				right: 10%;
				display: inline-block;
				padding: 5upx;
				border-bottom: 1upx solid #ccc;
			}

			image {
				width: 32upx;
				vertical-align: middle;
				margin-right: 10upx;
			}

			.protocol {
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
			}
		}

		.login {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			margin-top: 64upx;

			image {
				width: 328upx;
			}
		}
	}
</style>
